<template>
    <div class="set">
        <h3>修改用户资料</h3>
        <van-form>
            <van-cell-group inset>
                <van-field
                  v-model="user_nick_name"
                  name="用户名"
                  label="用户名"
                  placeholder="用户名"
                  :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field name="radio" label="性别">
                  <template #input>
                    <van-radio-group v-model="user_sex" direction="horizontal">
                      <van-radio name="男">男</van-radio>
                      <van-radio name="女">女</van-radio>
                    </van-radio-group>
                  </template>
                </van-field>
                <van-field
                  v-model="user_age"
                  name="用户年龄"
                  label="用户年龄"
                  placeholder="用户年龄"
                  :rules="[{ required: true, message: '请填写用户年龄' }]"
                />
                <van-field
                  v-model="user_address"
                  name="用户地址"
                  label="用户地址"
                  placeholder="用户地址"
                  :rules="[{ required: true, message: '请填写用户地址' }]"
                />
            </van-cell-group>
        </van-form>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit" @click="setFn">
            提交
          </van-button>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue'
    import { setUserFn } from '../api/index'
    import { showDialog,showConfirmDialog } from 'vant';
    import { useRouter } from 'vue-router'
    const $router = useRouter();
    const user_sex = ref('男');
    let user_nick_name = ref("");
    let user_age = ref("");
    let user_address = ref("");

    const setFn = ()=>{
        showConfirmDialog({
          title: '',
          message:
            '确定要修改吗？',
        })
          .then(async() => {
            await setUserFn({user_nick_name:user_nick_name.value,user_sex:user_sex.value,user_age:user_age.value,user_address:user_address.value}).then(
                (content:any)=>{
                    console.log(content)
                    let {result, code} = content;
                    // console.log(result,code)
                    if(code == 200) {
                        showDialog({
                          title: '',
                          message: '用户资料修改成功',
                        }).then(() => {
                            // 延迟跳转登录页面
                            setTimeout(() => {
                                $router.replace({path: '/home'})
                            }, 150);
                        });
                    }  
                    else{
                        showDialog({
                          title: '',
                          message: '用户资料修改失败',
                        }).then(() => {
                        });
                    }
                }
            )
          })
          .catch(() => {
          });   
    }
</script>

<style lang="less" scoped>
    .set{
        margin: 10px;
        h3{
            text-align: center;
            font-size: 18px;
            margin-bottom: 30px;
        }
    }
</style>